<template>
	<!-- 收货地址 -->
	<view class="all">
		<!-- 头部返回 -->
		<view class="hearder">
			<view style="width: 30rpx;height: auto;"></view>
			<image src="../../static/icon/back.png"  @click="back"></image>
			<text>我的收货地址</text>
		</view>
		<view v-if="loginInfo==null" style="width: 100%;height: 200rpx;line-height: 200rpx;text-align: center; background-color: #FFFFFF;">你好，请先登录</view>
		<view class="receipt-cont" v-for="item in receiptList" v-if="loginInfo!=null">
			<view class="item" >
				<!-- left -->
				<view class="left">
					<view class="left1">
						<image src="../../static/icon/home-fill.png" v-if="item.status == 0"></image>
						<view v-if="item.status == 1" style="width: 10rpx;height: 1rpx;"></view>
						<view v-if="item.status == 1" class="left-name">王相</view>
					</view>
				</view>
				<view class="center">
					<view class="center-item1">
						<view class="user-name">{{item.name}}</view>
						<view class="mobail">{{item.mobail}}</view>
						<view class="item2" v-if="item.status == 0">默认</view>
					</view>
					<view class="center-item2">
						{{item.province}}{{item.city}}{{item.area}}{{item.localtion}}
					</view>
				</view>
				
				<view class="right">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="change" @click="update(item)">修改</view>
				</view>
			</view>
			<view style="width: 90%;height: 0.5px;background-color: #EAEDED;margin: 2px auto;"></view>
			<view class="default">
				<view class="default-left">
					<view style="width: 20rpx;height: 30rpx;"></view>
					<!-- <view :class="item.status==0?'default-choose':''"></view> -->
					<view style="margin-top: 17rpx;font-size: 27rpx;color: #7F8C8D;margin-left: 15rpx;" v-if="item.status==0">默认地址</view>
				</view>
				<view class="default-right">
					<view></view>
					<view @click="openDelelte(item)">删除</view>
				</view>
			</view>
		</view>
		<view class="add-receipt">
			<view class="item3" @click="openAdd">
				<view style="width: 10rpx;height: 100rpx;"></view>
				<image src="../../static/icon/add.png" style="width: 70rpx;height: 70rpx;margin-top: 20rpx;margin-left: 70rpx;"></image>
				<view style="height: 100rpx;color: #FFFFFF;line-height: 100rpx;font-size: 40rpx;margin-left: 50rpx;">新增收货地址</view>
			</view>
		</view>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="add" type="dialog">
				<view class="add-update-receipt-dialog">
					<view class="receipt-title">{{title}}</view>
					<view class="input">
						<view class="input-left">
							收货人
						</view>
						<input type="text"  v-model="receiptForm.name"/>
					</view>
					<view class="input">
						<view class="input-left">
							电话号码
						</view>
						<input type="text"  v-model="receiptForm.mobail"/>
					</view>
					<view class="input">
						<view class="input-left">
						省
						</view>
						<view class="input-right">
						  <uni-data-picker :localdata="provinceList" popup-title="省/直辖市" @change="chooseProvince" ></uni-data-picker>
						</view>
					</view>
					<view class="input">
						<view class="input-left">
							市
						</view>
						<view class="input-right">
						  <uni-data-picker :localdata="cityList" popup-title="市/自治州" @change="chooseCity" ></uni-data-picker>
						</view>
					</view>
					<view class="input">
						<view class="input-left">
							区
						</view>
						<view class="input-right">
						  <uni-data-picker :localdata="areaList" popup-title="区/县" @change="chooseArea" ></uni-data-picker>
						</view>
					</view>
					<view class="input">
						<view class="input-left">
							详细地址
						</view>
						<input type="text"  v-model="receiptForm.localtion"/>
					</view>
					<view style="width: 80%;height: 70rpx;margin: 10rpx auto;display: flex; " v-if="doType=='update'">
						<view class="default-item2">默认地址</view>
						<view :class="receiptForm.status==0?'default-item1':'default-item3'" @click="changeDefault(receiptForm.status)"></view>
					</view>
					
					<view style="width: 80%;
					height: 100rpx;
					border-radius: 20rpx;
					background-color: #09BB07;
					text-align: center;
					line-height: 100rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					margin: 30rpx auto 30rpx auto;
					"
					@click="save"
					v-if="doType=='add'"
					>
						保存
					</view>
					<view style="width: 80%;
					height: 100rpx;
					border-radius: 20rpx;
					background-color: #DC7633;
					text-align: center;
					line-height: 100rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					margin: 30rpx auto 30rpx auto;
					"
					@click="updatReceipt"
					v-if="doType=='update'"
					>
						修改
					</view>
					
					
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="login" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="登录" title="未登录" content="尊敬的用户您还未登录,请先登录" @confirm="login"
					@close="closeLogin"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="delete" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="删除" title="删除" :content="content" @confirm="deleteReceipt()"
					@close="closeLogin"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000" style="text-align: center;"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import http from '../../util/httpRequest.js'
	import store from "../../store/index.js"
	export default{
		data(){
			return{
				title:"新增",
				provinceList:[],
				receiptList:[],
				cityList:[],
				areaList:[],
				receiptForm:{
					id:null,
					name:null,
					mobail:null,
					province:null,
					city:null,
					area:null,
					localtion:null,
					status:null
				},
				msgType: null,
				messageText: null,
				doType:"add",	
				deleteId:null,
				content:null,
				
			}
		},
		computed:{
			router(){
				return store.state.common.router
			},
			loginInfo(){
				return store.state.common.loginInfo
				
			},
		},
		methods:{
			back(){
				var that = this
				uni.reLaunch({
					url:that.router
				})
			},
			openAdd(){
				var that = this
				if(that.loginInfo!=null){
					this.doType = "add"
					this.getProvince()
					this.$refs.add.open()
				}else{
					that.$refs.login.open()	
				}
				
			},
			//获取省数据
			getProvince(){
				var that = this
				uni.request({
					url:http.memberUrl+"member/localtion/province",
					method:"GET",
					success(res) {
						that.provinceList = res.data.list
						
						// console.log(res.data.list)
					}
				})
				
			},
			//选择省
			chooseProvince(e){
				var that = this
				let province = e.detail.value[0]
				that.receiptForm.province = null
				that.cityList = []
				if(province!=null){
					uni.request({
						url:http.memberUrl+"member/localtion/city",
						method:"POST",
						data:{
							value: province.value
						},
						success(res) {
							that.receiptForm.province = province.text
							that.cityList = res.data.list
							// console.log(res.data.list)
						}
					})
				}
		
			},
			//选择城市
			chooseCity(e){
				var that = this
				let city = e.detail.value[0]
				that.receiptForm.city = null
				that.areaList = []
				if(city!=null){
					uni.request({
						url:http.memberUrl+"member/localtion/area",
						method:"POST",
						data:{
							value: city.value
						},
						success(res) {
							that.receiptForm.city = city.text
							
							that.areaList = res.data.list
							// console.log(res.data.list)
						}
					})
				}
				
			},
			chooseArea(e){
				var that = this
				let area = e.detail.value[0]
				that.receiptForm.area = null
				if(area!=null){
					that.receiptForm.area = area.text
				}
				console.log(that.receiptForm)
			},
			save(){
				var that = this
				if(that.receiptForm!=null){
					uni.request({
						url:http.memberUrl+"member/receipt/add",
						method:"POST",
						data:{
							userId:that.loginInfo.userId,
							name:that.receiptForm.name,
							mobail:that.receiptForm.mobail,
							province:that.receiptForm.province,
							city:that.receiptForm.city,
							area:that.receiptForm.area,
							localtion:that.receiptForm.localtion
						},
						success(res) {
							 console.log(res)
							if(res.data.code == 500){
								// console.log("添加失败")
								that.messageText = "添加失败"
								that.msgType = "error"
								that.$refs.message.open()
								that.$refs.add.close()
								
							}
							if(res.data.code == 0){
								that.messageText = res.data.msg
								that.msgType = "success"
								that.$refs.message.open()
								that.$refs.add.close()
							}
							that.receiptForm = null
							that.getReceiptList()
						}
					})
				}
			},
			closeLogin(){
				console.log("关闭")
				this.$refs.login.close()
			},
			login(){
				//保存路由
				
				uni.reLaunch({
					url: "/pages/info/info",
					success() {
						store.commit("router","/pages/info/receipt")
					}
				})
			},
			//获取收货地址数据
			getReceiptList(){
				var that = this
					that.receiptList = []
					uni.request({
						url:http.memberUrl+"member/receipt/list",
						method:"POST",
						data:{
							userId: that.loginInfo.userId
							// userId:3
						},
						success(res) {
							that.receiptList = res.data.list
							console.log(res.data.list)
						}
					})
			},
			update(item){
				console.log("选择修改",item)
				this.doType = "update"
				this.title = "修改"
				var that = this
				that.receiptForm.id = item.id
				that.receiptForm.name = item.name
				that.receiptForm.mobail = item.mobail
				that.receiptForm.status = item.status
				this.getProvince()
				that.$refs.add.open()
				console.log(item)
				
			},
			//修改默认
			changeDefault(item){
				console.log(item)
				if(item==0){
					this.receiptForm.status=1
				}
				if(item==1){
					this.receiptForm.status=0
				}
				console.log("选择后表单数据",this.receiptForm)
			},
			updatReceipt(){
				this.receiptList = []
				var that = this
				uni.request({
					url:http.memberUrl+"member/receipt/update",
					method:"POST",
					data:{
						receiptId:that.receiptForm.id,
						name:that.receiptForm.name,
						mobail:that.receiptForm.mobail,
						province:that.receiptForm.province,
						city:that.receiptForm.city,
						area:that.receiptForm.area,
						localtion:that.receiptForm.localtion,
						status:that.receiptForm.status
					},
					success(res) {
						that.messageText = res.data.msg
						that.msgType = "success"
						that.$refs.message.open()
						that.$refs.add.close()
						
						that.getReceiptList()
					}
				})
			},
			deleteReceipt(){
				var that = this
				uni.request({
					url:http.memberUrl+"member/receipt/delete",
					method:"POST",
					data:{
						id: that.deleteId
					},
					success(res) {
						if(res.data.code==0){
							that.messageText = res.data.msg
							that.msgType = "success"
							that.$refs.message.open()
							that.$refs.delete.close()
							that.getReceiptList()
						}
						if(res.data.code==500){
							that.messageText = res.data.msg
							that.msgType = "error"
							that.$refs.message.open()
							that.$refs.delete.close()
							that.getReceiptList()
						}
					}
				})
			},
			//打开删除弹出层
			openDelelte(item){
				this.deleteId = item.id
				this.content = item.province+item.city+item.area+item.localtion
				this.$refs.delete.open()
			}
			
			
			
		},
		created() {
			this.getReceiptList()
		},
		
		
	}
	
</script>

<style scoped>
	
	.all{
		width: 100%;
		background-color: #E9E8E6;
	}
	.hearder{
		display: flex;
		width: 100%;
		height: 70rpx;
		background-color: #2C3E50;
		color: #FFFFFF;
	}
	.hearder>image{
		margin-top: 10rpx;
		height: 45rpx;
		width: 45rpx;
	}
	.hearder>text{
		margin-left: 15rpx;
		margin-top: 15rpx;
	}
	.receipt-cont{
		margin: 10rpx auto;
		width: 95%;
		/* height: 300rpx; */
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.item{
		display: flex;
		width: 100%;
		height: 200rpx;
		/* background-color: #007AFF; */
		
	}
	.left{
		width: 20%;
		height: 200rpx;
		/* background-color: #09BB07 */
	}
	.center{
		width: 70%;
		height: 200rpx;
		/* background-color: #F7DC6F; */
	}
	.right{
		width: 10%;
		height: 200rpx;
		/* background-color: #E67E22; */
	}
	
	.change{
		width: 100%;
		text-align: center;
		margin-top: 100rpx;
		font-size: 24rpx;
		color:#E59866;
	}
	.default{
		display: flex;
		width: 100%;
		height: 70rpx;
		/* background-color: #3498DB; */
	}
	.default-left{
		display: flex;
		width: 40%;
		height: 70rpx;
		/* background-color: #D4AC0D; */
	}
	.default-right{
		display: flex;
		margin-left: 30%;
		width: 30%;
		height: 70rpx;
		/* background-color: #D35400; */
	}
	.default-right>view{
		width: 50%;
		height: 70rpx;
		line-height: 70rpx;
		color:#7F8C8D ;
		font-size: 25rpx;
		/* background-color: #09BB07 */
	}
	
	.default-choose{
		margin-top: 19rpx;
		width: 35rpx ;
		height: 35rpx;
		border-radius: 50%;
		background-color: #ff823b;
		background-image: linear-gradient(90deg, #ff823b 0%, #FF2525 74%);
	}
	.left1{
		margin: 70rpx auto;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background-color: #ff823b;
		background-image: linear-gradient(90deg, #ff823b 0%, #FF2525 74%);

	}
	.left1>image{
		margin-top: 5rpx;
		margin-left: 9rpx;
		width: 50rpx;
		height: 50rpx;
		
	}
	.left-name{
		margin-top: 20rpx;
		/* background-color: #007AFF; */
		color: #BDC3C7;
		font-size: 20rpx;
		text-align: center;
		display:-webkit-box;
		-webkit-line-clamp:1;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-all;
		
	}
	.center-item1{
		display: flex;
		width: 100%;
		height: 70rpx;
		/* background-color: #007AFF */
	}
	.user-name{
		height: 70rpx;
		line-height: 70rpx;
		/* background-color: #09BB07; */
	}
	.mobail{
		margin-left: 10rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #BDC3C7;
	}
	.item2{
		margin-top: 10rpx;
		margin-left: 15rpx;
		width: 70rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 23rpx;
		color: #FA694C;
		border-radius: 10rpx;
		border: 1rpx solid #FA694C;
		background-color: #ffffff;
	}
	.center-item2{
		width: 100%;
		height: 120rpx;
		/* overflow: hidden; */
		font-size: 24rpx;
	   display:-webkit-box;
	   -webkit-line-clamp:4;
	   overflow:hidden;
	   text-overflow:ellipsis;
	   -webkit-box-orient:vertical;
	   word-break:break-all;
		/* background-color: #09BB07; */
	}
	.add-receipt{
		/* margin: 0 auto; */
		width: 100%;
		height: 100rpx;
		/* border-radius: 30rpx; */
		position: fixed;
		bottom: 10rpx;
		/* background-color: #007AFF */
		
	}
	.item3{
		display: flex;
		margin: 0 auto;
		width: 70%;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #09BB07;
	}
	.add-update-receipt-dialog{
		width: 700rpx;
		height: 800rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
	}
	.receipt-title{
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		/* background-color: #007AFF; */
	}
	.input{
		display: flex;
		margin: 10rpx auto 0 auto;
		width: 90%;
		height: 70rpx;
		/* background-color: #09BB07; */
	}
	.input-left{
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #AAB7B8;
		text-align: center;
		/* background-color: #F7DC6F; */
	}
	.input>input{
		width: 450rpx;
		height: 68rpx;
		border-radius: 10rpx;
		color: #95A5A6;
		font-size: 24rpx;
		text-align: center;
		border: 1rpx solid #AAB7B8;
		outline: none;
	}
	.input-right{
		width: 450rpx;
		height: 70rpx;
	}
	.default-item1{
		margin-left: 370rpx;
		margin-top: 18rpx;
		box-sizing: border-box;
		width: 35rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 10rpx solid #CCD1D1;
		background-color: #DC7633;
	}
	.default-item2{
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		color: #B2BABB;
	}
	.default-item3{
		margin-left: 370rpx;
		margin-top: 18rpx;
		box-sizing: border-box;
		width: 35rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 10rpx solid #CCD1D1;
		background-color: #FFFFFF;
	}
	
</style>
